<template>
	<view class="page-container flex fd-c">
		<topBar :back="false" :isPerson="false">
			<template #left>
				<!-- <uni-icons type="left" size="24" style="margin-right: 20rpx;" color="#000" @click="handleBeforeUnload"
					class="flex ai-c"></uni-icons> -->
				<image src="/static/zuojianyoufanhui.png" @click="handleBeforeUnload" mode="widthFix"
					style="width: 52rpx;height: 52rpx;margin-right: 20rpx;"></image>
			</template>
		</topBar>
		<scroll-view class="scrollable-content container flex fd-c ai-c" scroll-y>
			<view v-if="!showQuizPage" style="width: 100%;padding: 0 32rpx;box-sizing: border-box;">
				<view v-if="!showWaitingRoom && mode !== 'zizu'" style="padding-top: 60rpx;">
					<view class="flex fd-c ai-c" style="margin-bottom: 20rpx;">
						<image :src="subject.image" style="width: 80rpx; height: 80rpx;" mode="aspectFill"></image>
						<view style="font-size: 42rpx; font-weight: 600; margin-top: 20rpx;color: #333;">{{ subject.name
							}}
						</view>
					</view>
					<view style="font-size: 28rpx;color: #7e7e7e;margin-bottom: 38rpx;text-align: center;">
						{{ infoQuestion.name }}
					</view>
				</view>
				<view v-if="showWaitingRoom && mode !== 'zizu'" class="waiting-room">
					<view class="waiting-icon flex fd-c ai-c">
						<image src="/static/curcel.png" style="width: 72rpx; height: 72rpx;" mode="aspectFill">
						</image>
					</view>
					<view class="waiting-text">等待其他答题者进入</view>
				</view>
				<view v-if="mode === 'zizu'">
					<view class="zizu-participants">
						<!-- 根据人数显示不同的参与者布局 -->
						<view v-if="players === 2" class="participants-2">
							<!-- 组局人头像 -->
							<view class="host-avatar">
								<image src="/static/3.png" style="width: 100rpx; height: 100rpx;" mode="aspectFill">
								</image>
								<view class="avatar-label">我</view>
								<view class="avatar-role">组局人</view>
							</view>

							<!-- 邀请好友按钮 -->
							<view class="invite-button" @click="handleInviteFriends">
								<view class="invite-icon">
									<image src="/static/jianimade.png" style="width: 50rpx; height: 50rpx;"
										mode="aspectFill">
									</image>
								</view>
								<button class="invite-text" open-type="share">邀请好友</button>
							</view>
						</view>

						<view v-else-if="players === 3" class="participants-3">
							<!-- 组局人头像 -->
							<view class="host-avatar">
								<image src="/static/3.png" style="width: 100rpx; height: 100rpx;" mode="aspectFill">
								</image>
								<view class="avatar-label">我</view>
								<view class="avatar-role">组局人</view>
							</view>

							<view class="host-avatar">
								<image src="/static/3.png" style="width: 100rpx; height: 100rpx;" mode="aspectFill">
								</image>
								<view class="avatar-label">未加入</view>

							</view>

							<!-- 邀请好友按钮 -->
							<view class="invite-button" @click="handleInviteFriends">
								<view class="invite-icon">
									<image src="/static/jianimade.png" style="width: 50rpx; height: 50rpx;"
										mode="aspectFill">
									</image>
								</view>
								<view class="invite-text">邀请好友</view>
							</view>
						</view>

						<view v-else-if="players === 5" class="participants-5">
							<!-- 组局人头像 -->
							<view class="flex jc-c" style="gap: 80rpx;">
								<view class="host-avatar">
									<image src="/static/3.png" style="width: 100rpx; height: 100rpx;" mode="aspectFill">
									</image>
									<view class="avatar-label">我</view>
									<view class="avatar-role">组局人</view>
								</view>

								<view class="host-avatar">
									<image src="/static/3.png" style="width: 100rpx; height: 100rpx;" mode="aspectFill">
									</image>
									<view class="avatar-label">未加入</view>

								</view>
							</view>
							<view class="flex jc-c" style="gap: 80rpx;">
								<view class="host-avatar">
									<image src="/static/3.png" style="width: 100rpx; height: 100rpx;" mode="aspectFill">
									</image>
									<view class="avatar-label">未加入</view>

								</view>
								<view class="host-avatar">
									<image src="/static/3.png" style="width: 100rpx; height: 100rpx;" mode="aspectFill">
									</image>
									<view class="avatar-label">未加入</view>

								</view>

								<!-- 邀请好友按钮 -->
								<view class="invite-button" @click="handleInviteFriends">
									<view class="invite-icon">
										<image src="/static/jianimade.png" style="width: 50rpx; height: 50rpx;"
											mode="aspectFill">
										</image>
									</view>
									<view class="invite-text">邀请好友</view>
								</view>
							</view>

						</view>

					</view>
				</view>
				<view class="bg-liner flex fd-c ai-c">
					<view class="params-container" v-if="!showWaitingRoom">
						<view class="param-item">
							<text class="param-label">本场题数:</text>
							<text class="param-value">{{ infoQuestion.topic_num }}道题</text>
						</view>
						<view class="param-item">
							<text class="param-label">答题需付:</text>
							<text class="param-value">{{ infoQuestion.money }}元/人</text>
						</view>
						<view class="param-item">
							<text class="param-label">时<text style="opacity: 0;">计算</text>间:</text>
							<text class="param-value">{{ infoQuestion.ask_time }}分钟</text>
						</view>
						<view class="param-item">
							<text class="param-label">获<text style="opacity: 0;">计算</text>胜:</text>
							<text class="param-value">{{ infoQuestion.win_num }}人</text>
						</view>
						<view class="param-item">
							<text class="param-label">匹配人数:</text>
							<text class="param-value">{{ infoQuestion.part_num }}人</text>
						</view>
						<view class="param-item">
							<text class="param-label">获胜奖励:</text>
							<text class="param-value">{{ infoQuestion.point }}积分</text>
						</view>
					</view>
					<view v-if="showWaitingRoom" class="avatars-section">
						<view v-if="showWaitingRoomCount === 6" class="avatars-6">
							<view class="avatar-row">
								<view class="avatar-item" v-for="(item, i) in realTimeQueueData" :key="item.id">
									<image :src="getAvatarByIndex(i - 1)" style="width: 100%; height: 100%;"
										mode="aspectFill">
									</image>
								</view>
							</view>
							<view class="avatar-row">
								<view class="avatar-item" v-for="i in 3" :key="i + 3">
									<image :src="getAvatarByIndex(i + 2)" style="width: 100%; height: 100%;"
										mode="aspectFill">
									</image>
								</view>
							</view>
						</view>
						<view v-else-if="showWaitingRoomCount <= 7" class="avatars-flex">
							<view class="avatar-item" v-for="i in showWaitingRoomCount" :key="i">
								<image :src="getAvatarByIndex(i - 1)" style="width: 100%; height: 100%;"
									mode="aspectFill">
								</image>
							</view>
						</view>
						<view v-if="showWaitingRoomCount === 8" class="avatars-8">
							<view class="avatar-row">
								<view class="avatar-item" v-for="i in 4" :key="i">
									<image :src="getAvatarByIndex(i - 1)" style="width: 100%; height: 100%;"
										mode="aspectFill">
									</image>
								</view>
							</view>
							<view class="avatar-row">
								<view class="avatar-item" v-for="i in 4" :key="i + 4">
									<image :src="getAvatarByIndex(i + 3)" style="width: 100%; height: 100%;"
										mode="aspectFill">
									</image>
								</view>
							</view>
						</view>
						<view v-else-if="showWaitingRoomCount === 10" class="avatars-10">
							<view class="avatar-row">
								<view class="avatar-item" v-for="i in 5" :key="i">
									<image :src="getAvatarByIndex(i - 1)" style="width: 100%; height: 100%;"
										mode="aspectFill">
									</image>
								</view>
							</view>
							<view class="avatar-row">
								<view class="avatar-item" v-for="i in 5" :key="i + 5">
									<image :src="getAvatarByIndex(i + 4)" style="width: 100%; height: 100%;"
										mode="aspectFill">
									</image>
								</view>
							</view>
						</view>
						<view v-else-if="showWaitingRoomCount >= 11" class="avatars-11-12">
							<view class="avatar-row">
								<view class="avatar-item" v-for="i in 4" :key="i">
									<image :src="getAvatarByIndex(i - 1)" style="width: 100%; height: 100%;"
										mode="aspectFill">
									</image>
								</view>
							</view>
							<view class="avatar-row">
								<view class="avatar-item" v-for="i in 4" :key="i + 4">
									<image :src="getAvatarByIndex(i + 3)" style="width: 100%; height: 100%;"
										mode="aspectFill">
									</image>
								</view>
							</view>
							<view class="avatar-row">
								<view class="avatar-item" v-for="i in (showWaitingRoomCount === 11 ? 3 : 4)"
									:key="i + 8">
									<image :src="getAvatarByIndex(i + 7)" style="width: 100%; height: 100%;"
										mode="aspectFill">
									</image>
								</view>
							</view>
						</view>
						<view v-else-if="showWaitingRoomCount === 9" class="avatars-flexible">
							<view class="avatar-row">
								<view class="avatar-item" v-for="i in 5" :key="i">
									<image :src="getAvatarByIndex(i - 1)" style="width: 100%; height: 100%;"
										mode="aspectFill">
									</image>
								</view>
							</view>
							<view class="avatar-row">
								<view class="avatar-item" v-for="i in 4" :key="i + 5">
									<image :src="getAvatarByIndex(i + 4)" style="width: 100%; height: 100%;"
										mode="aspectFill">
									</image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="payment-section" v-if="!showWaitingRoom">
					<!-- 被邀请者显示这个 -->
					<view v-if="mode === 'zizu' && !isHost && hasSelectedTopic" class="invitee-notice">
						注意：被邀请人支付成功后，如组局者取消考试，被邀请人所支付的费用仅退还至本小程序余额中。
					</view>
					<!-- 被邀请者显示这个且等待组局人点击开始答题显示这个 -->
					<view v-if="mode === 'zizu' && !isHost && hasSelectedTopic && !hostStartedQuiz"
						class="payment-text">
						等待组局人点击开始答题
					</view>
					<!-- 组局者和被邀请者支付成功后都显示这个 -->
					<view v-if="mode === 'zizu' && hasSelectedTopic && hasPaid" class="payment-text">
						已为你随机筛选出【初级-数学】中的10道题
					</view>
					<view v-if="mode !== 'zizu'" class="pay-button" :class="{ 'paying': isPaying }"
						@click="handlePayment">
						{{ isPaying ? '支付中...' : `支付 ¥${infoQuestion.money}` }}
					</view>
					<view v-if="mode === 'zizu' && isHost && !hasSelectedTopic" class="pay-button"
						@click="handleSelectTopic">
						选择题型
					</view>
					<view v-if="mode === 'zizu' && hasSelectedTopic && !hasPaid" class="pay-button"
						:class="{ 'paying': isPaying }" @click="handlePayment">
						{{ isPaying ? '支付中...' : `支付 ¥${infoQuestion.money}` }}
					</view>
					<view v-if="mode === 'zizu' && hasSelectedTopic && hasPaid" class="pay-button"
						@click="handleStartQuiz">
						开始答题
					</view>
					<view class="balance-text">余额: ¥{{ userStore.userInfo.money }}</view>
				</view>

				<view class="popup-overlay" v-if="showPopup" @click="closePopup">
					<view class="popup-content" @click.stop>
						<uni-icons type="spinner-cycle" size="60" color="#fff" class="spinner-icon"></uni-icons>
						<view class="popup-text">
							<view class="popup-line1">本小程序余额不足</view>
							<view class="popup-line1">唤起微信支付</view>
						</view>
					</view>
				</view>
			</view>
			<quiz-page style="width: 100%;" v-if="showQuizPage" :timeLimit="infoQuestion.ask_time * 60" :ques_id="ques_id"
				:room_id="room_id" :questions="quizQuestions" @back="handleQuizBack" @submit="handleQuizSubmit"
				@question-change="handleQuestionChange" @time-up="handleTimeUp" />
		</scroll-view>
	</view>


	<!-- 级别选择器 -->
	<LevelSelector ref="levelSelectorRef" @confirm="handleLevelConfirm" />

	<!-- 学科选择器 -->
	<SubjectSelector ref="subjectSelectorRef" @confirm="handleSubjectConfirm" :backIcon="true"
		@level-selector="handleLevelSelector" />
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import QuizPage from '@/components/quiz-page.vue'
import LevelSelector from '@/components/level-selector.vue'
import SubjectSelector from '@/components/subject-selector.vue'
import api from '@/api'
import { useUserStore } from '@/store/index.js'
import topBar from '@/components/topBar.vue'
const userStore = useUserStore()
const subject = ref({}) // 学科
const isPaying = ref(false) // 是否支付中
const showPopup = ref(false) // 是否显示支付弹窗
const showWaitingRoom = ref(false) // 是否显示等待房间
const showWaitingRoomCount = ref(0) // 等待房间人数
const randomAvatars = ref([]) // 随机头像
const realTimeQueueData = ref([]) // 实时排队数据
const showQuizPage = ref(false) // 是否显示答题页面
const quizQuestions = ref([]) // 答题题目
const isShow = ref(true) // 是否显示page-container
const mode = ref('') // 模式
const players = ref(2) // 人数
const hasSelectedTopic = ref(false) // 是否已经完成题型选择
const hasPaid = ref(false) // 是否已经完成支付
const isHost = ref(true) // 是否是组局者（true为组局者，false为被邀请者）
const hostStartedQuiz = ref(false) // 组局人是否已经点击开始答题
// 组件引用
const levelSelectorRef = ref(null)
const subjectSelectorRef = ref(null)
const infoQuestion = ref({}) // 题目信息
const scene_id = ref('')

const ques_id = ref('')
const room_id = ref('')


const handleLevelSelector = () => {
	levelSelectorRef.value?.openPopup()
}
onLoad((options) => {
	console.log(options, 'options')
	mode.value = options.mode
	players.value = Number(options.players)
	if(options.scene_id){
		scene_id.value = options.scene_id
	}
	// 判断是否是组局者
	// 如果有invitee参数，说明是被邀请者
	if (options.invitee) {
		isHost.value = false
		// 被邀请者默认已经完成题型选择
		hasSelectedTopic.value = true
	} else {
		isHost.value = true
	}

	console.log(options.subject, 'subject')
	// 获取等级的内容
	if (options.subject) {
		subject.value = JSON.parse(options.subject)
		scene_id.value = subject.value.scene_id
		api.getQuestionInfo({
			code: subject.value.code,
		}).then(res => {
			infoQuestion.value = res.data
			// 获取等级场题目
			api.getLevelQuestion({
				play_id: infoQuestion.value.id,
				subject_id: subject.value.id,
			}).then(res => {
				quizQuestions.value = res.data.map(item => {
					return {
						...item,
						title: item.title,
						options: [
							{ text: item.option_a, isCorrect: false },
							{ text: item.option_b, isCorrect: false },
							{ text: item.option_c, isCorrect: false },
							{ text: item.option_d, isCorrect: false }
						],
					}
				})
			})
		})
	}
})

const handleSelectTopic = () => {
	// 先选择答题级别 再选择学科类别

	levelSelectorRef.value?.openPopup()
}

// 处理级别选择确认
const handleLevelConfirm = (level) => {
	console.log('选择的级别：', level)
	console.log(scene_id.value, 'scene_id.value')
	// 级别选择完成后，打开学科选择器
	setTimeout(() => {
		subjectSelectorRef.value?.openPopup({
			type: level,
			scene_id: scene_id.value
		})
	}, 300)
}

// 处理学科选择确认
const handleSubjectConfirm = (subjectType) => {
	console.log('选择的学科：', subjectType)
	// 这里可以添加后续逻辑，显示答题页面
	// 比如跳转到答题页面或者显示题目等
	hasSelectedTopic.value = true
}
const handleBeforeUnload = (e) => {
	isShow.value = false
	if (mode.value === 'zizu') {
		uni.showModal({
			title: '确定退出吗？',
			content: '退出后，该场次将不被保留；同时对方收到的邀请链接也将失效！',
			success: (res) => {
				if (res.confirm) {
					uni.navigateBack()
				} else {
					isShow.value = true
				}
			}
		})
	} else {
		// 如果时间到了，可以不用提示这个直接退出
		if (isSubmit.value) {
			uni.navigateBack()
			return
		}
		uni.showModal({
			title: '确定退出吗？',
			content: '退出后，将不再能够进入该场次；同时所支付的答题费用将无法以原路径返还，而是直接返还至小程序余额中！',
			success: (res) => {
				if (res.confirm) {
					uni.navigateBack()
				} else {
					isShow.value = true
				}
			}
		})
	}
}

const handleUnload = (e) => {
	showExitPopup.value = true
	return false
}

const generateRandomAvatars = () => {
	randomAvatars.value = []
	for (let i = 0; i < 20; i++) {
		const randomNum = Math.floor(Math.random() * 5) + 1
		randomAvatars.value.push(randomNum)
	}
}

const getAvatarByIndex = (index) => {
	if (randomAvatars.value[index]) {
		return `/static/${randomAvatars.value[index]}.png`
	}
	return `/static/1.png`
}
const handlePayment = () => {
	if (isPaying.value) return
	console.log(infoQuestion.value, 'infoQuestion.value')
	isPaying.value = true
	// 余额不够时启用
	// showPopup.value = true
	api.getPayQuiz({
		play_id: infoQuestion.value.id,
		subject_id: subject.value.id,
		user_id: userStore.userInfo.id,
		amount: infoQuestion.value.money,
		scene_id: scene_id.value,
		theme_id: infoQuestion.value.id,
		// model_id: 对局id
	}).then(res => {
		isPaying.value = false
		// showPopup.value = false
		showWaitingRoom.value = true
		ques_id.value = res.data
		let interval = setInterval(() => {
			api.getRealTimeQueue({
				ques_id: ques_id.value,
			}).then(res => {
				showWaitingRoomCount.value = res.data.list.length
				room_id.value = res.data.list[0].room_id
				if (res.data.is_use == 1) {
					clearInterval(interval)
					showWaitingRoom.value = false
					showQuizPage.value = true
				}
			})
		}, 3000)

	})
	// setTimeout(() => {
	// 	isPaying.value = false
	// 	showPopup.value = false

	// 	// 如果是自组局模式，支付完成后显示开始答题按钮
	// 	if (mode.value === 'zizu') {
	// 		hasPaid.value = true // 支付完成，显示开始答题按钮
	// 	} else {
	// 		// 非自组局模式，直接跳转到答题页面
	// 		showWaitingRoom.value = false
	// 		showQuizPage.value = true
	// 	}
	// }, 3000)
}

const closePopup = () => {
	showPopup.value = false
}

const handleQuizBack = () => {
	showQuizPage.value = false
	showWaitingRoom.value = true
}

const isSubmit = ref(false)

const handleQuizSubmit = (result) => {
	console.log('答题提交:', result)
	const data = JSON.parse(JSON.stringify(result))
	api.submitAnswer({
		ques_id: ques_id.value,
		user_id: userStore.userInfo.id,
		room_id: room_id.value,
		answers: data.resultAnswersData.map(item => {
			return {
				ques_id: item.ques_id,
				answer: item.answerText
			}
		}),
	}).then(res => {
		isSubmit.value = true
		console.log('答题提交成功:', res)

	})
}

const handleQuestionChange = (index) => {
	console.log('切换到题目:', index + 1)
}

const handleTimeUp = () => {
	uni.showToast({
		title: '时间到！',
		icon: 'error'
	})
	handleQuizSubmit({
		answeredQuestions: [],
		totalQuestions: quizQuestions.value.length
	})
}

const handleInviteFriends = () => {

	// 这里可以添加邀请好友的逻辑
	// 比如分享到微信、生成邀请码等
	uni.showToast({
		title: '邀请功能开发中',
		icon: 'none'
	})
}
const onShareAppMessage = () => {
	const userId = "USER_ID";  // 当前用户ID
	const path = `/pages/index/datiqian/datiqian?inviter_id=${userId}&mode=invite&players=4`;  // 确保所有参数都传递

	console.log('分享路径:', path);  // 打印分享路径

	return {
		title: '邀请你来体验我们的应用',
		path: path,  // 分享的页面路径带参数
	};
};


const handleStartQuiz = () => {
	// 如果是组局人，设置开始答题状态
	if (isHost.value) {
		hostStartedQuiz.value = true
		// 这里可以添加通知被邀请者的逻辑
		// 比如发送WebSocket消息或者调用API
		console.log('组局人已开始答题，通知被邀请者')
	}

	showQuizPage.value = true
	showWaitingRoom.value = false
}

// 被邀请者接收组局人开始答题通知
const onHostStartQuiz = () => {
	if (!isHost.value) {
		hostStartedQuiz.value = true
		console.log('收到组局人开始答题通知')
		// 这里可以添加其他逻辑，比如显示提示等
		uni.showToast({
			title: '组局人已开始答题',
			icon: 'success',
			duration: 2000
		})
	}
}
</script>

<style lang="scss" scoped>
.page-container {
	height: 100vh;
	background-color: #fff;
	position: relative;
	display: flex;
	flex-direction: column;
}

.container {
	padding: 0 32rpx;
	box-sizing: border-box;
	padding-bottom: 60rpx;
}

.payment-text {
	width: 100%;
	text-align: center;
	color: #0F50DC;
	font-size: 26rpx;
	padding: 22rpx 0;
	border-bottom: 1px solid #c8c8c8;
	border-top: 1px solid #c8c8c8;
}

.invitee-notice {
	width: 100%;
	text-align: center;
	color: #FF6B35;
	font-size: 24rpx;
	padding: 20rpx 0;
	background: rgba(255, 107, 53, 0.1);
	border-radius: 12rpx;
	margin-bottom: 16rpx;
}

.bg-liner {
	width: 100%;
	border-radius: 24rpx;
	background: radial-gradient(52% 52% at 72% 89%, rgba(157, 123, 243, 0.08) 0%, rgba(188, 73, 255, 0) 100%), radial-gradient(69% 69% at 4% 86%, rgba(166, 155, 253, 0.08) 0%, rgba(128, 193, 255, 0) 100%), radial-gradient(45% 74% at 94% 10%, rgba(65, 209, 200, 0.08) 0%, rgba(54, 159, 116, 0) 100%), rgba(64, 134, 238, 0.04);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60rpx 32rpx;
	box-sizing: border-box;
}

.params-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20rpx;

}

.param-item {
	display: flex;
	align-items: center;
	gap: 16rpx;
	width: 100%;
}

.param-label {
	font-size: 28rpx;
	color: #333;
	font-weight: 700;
	width: 160rpx;
	text-align: right;
	margin-right: 20rpx;
}

.param-value {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

.payment-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 40rpx;
	gap: 40rpx;
}

.pay-button {
	background: #0F50DC;
	color: white;
	border: none;
	border-radius: 50rpx;
	width: 280rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: 32rpx;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
}

.pay-button.paying {
	background: #A0C3FF;
	cursor: not-allowed;
}

.popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.popup-content {
	background: #0F50DC;
	border-radius: 32rpx;
	padding: 60rpx 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32rpx;
	min-width: 500rpx;
}

.spinner-icon {
	animation: spin 1.5s linear infinite, colorChange 2s ease-in-out infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes colorChange {
	0% {
		color: #ffffff;
	}

	25% {
		color: #e3f2fd;
	}

	50% {
		color: #bbdefb;
	}

	75% {
		color: #90caf9;
	}

	100% {
		color: #ffffff;
	}
}

.popup-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16rpx;
}

.popup-line1 {
	color: white;
	font-size: 32rpx;
	font-weight: 500;
}

.balance-text {
	font-size: 24rpx;
	color: #7e7e7e;
	font-weight: 400;
}

.waiting-room {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40rpx;
	padding-top: 80rpx;
	margin-bottom: 60rpx;
}

.waiting-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100rpx;
	height: 100rpx;
	border: 1px solid #ccc;
	border-radius: 50%;
	position: relative;
}

.waiting-icon::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10rpx;
	height: 10rpx;
	background: #0F50DC;
	border-radius: 50%;
	transform: translate(-50%, -50%) rotate(-90deg) translateX(calc(50rpx - 0.5px));
	animation: orbit 3s linear infinite;
}

@keyframes orbit {
	from {
		transform: translate(-50%, -50%) rotate(-90deg) translateX(calc(50rpx - 0.5px));
	}

	to {
		transform: translate(-50%, -50%) rotate(270deg) translateX(calc(50rpx - 0.5px));
	}
}

.waiting-text {
	font-size: 32rpx;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.9);
}

.avatars-section {
	padding: 12rpx 0rpx;
	width: 100%;
}

.avatar-row {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20rpx;
	margin-bottom: 40rpx;
}

.avatar-row:last-child {
	margin-bottom: 0;
}

.avatar-item {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
}

.avatars-6 .avatar-row {
	gap: 60rpx;
}

.avatars-8 .avatar-row {
	gap: 30rpx;
}

.avatars-10 .avatar-row {
	gap: 20rpx;
}

.avatars-11-12 .avatar-row {
	gap: 30rpx;
}

.avatars-flexible .avatar-row {
	gap: 30rpx;
}

.avatars-flexible .avatar-row:first-child {
	gap: 25rpx;
}

.avatars-flex {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40rpx;
	flex-wrap: wrap;
}

.zizu-participants {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20rpx;
	margin-top: 40rpx;
	margin-bottom: 38rpx;
	width: 100%;
	padding: 0 20rpx;
	box-sizing: border-box;
}

.host-avatar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
}

.host-avatar image {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	overflow: hidden;
	// border: 2rpx solid #0F50DC;
}

.host-avatar .avatar-label {
	font-size: 28rpx;
	color: #000;
	font-weight: 600;
	margin-top: 24rpx;
}

.host-avatar .avatar-role {
	font-size: 20rpx;
	color: rgba(0, 0, 0, 0.6);
}

.participants-2 {
	display: flex;
	justify-content: center;
	// align-items: center;
	gap: 120rpx;
	width: 100%;
	margin-top: 20rpx;
}

.participants-3 {
	display: flex;
	justify-content: center;
	gap: 60rpx;
	width: 100%;
	margin-top: 20rpx;
}

.participants-5 {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: column;
	gap: 20rpx;
	width: 100%;
	margin-top: 20rpx;
}

.participant-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
	flex-shrink: 0;
}

.participant-slot image {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	overflow: hidden;
	border: 2rpx solid rgba(0, 0, 0, 0.1);
}

.participant-slot .avatar-label {
	font-size: 24rpx;
	color: rgba(0, 0, 0, 0.6);
	text-align: center;
	white-space: nowrap;
}

.invite-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
}

.invite-button .invite-icon {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background: rgba(15, 80, 220, 0.08);
	color: #0F50DC;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40rpx;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.3s ease;
}

.invite-button .invite-icon:hover {
	background: #0A3FA8;
	transform: scale(1.05);
}

.invite-text {
	border: none;
	background-color: transparent;
	box-shadow: none;
	font-size: 28rpx;
	color: #0F50DC;
	font-weight: 600;
	margin-top: 24rpx;
	padding: 0;
	line-height: 1;
}
</style>
